<template>
    <div class="bar">
      <h4>{{title}}</h4>
      <div class="chart">
        <v-chart :forceFit="true" :height="height" :data="data">
          <v-tooltip />
          <v-axis />
          <v-legend />
          <v-bar position="月份*客户数量" color="name" :adjust="adjust" />
        </v-chart>
      </div>
    </div>
  </template>
  
  <script>
    const DataSet = require('@antv/data-set');
  
    const sourceData = [
      { name: '2021', 'Jan.': 18.9, 'Feb.': 28.8, 'Mar.': 39.3, 'Apr.': 81.4, 'May': 47, 'Jun.': 20.3, 'Jul.': 24, 'Aug.': 35.6 },
      { name: '2022', 'Jan.': 12.4, 'Feb.': 23.2, 'Mar.': 34.5, 'Apr.': 99.7, 'May': 52.6, 'Jun.': 35.5, 'Jul.': 37.4, 'Aug.': 42.4 },
    ];
  
    const dv = new DataSet.View().source(sourceData);
    dv.transform({
      type: 'fold',
      fields: ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May', 'Jun.', 'Jul.', 'Aug.'],
      key: '月份',
      value: '客户数量',
    });
    const data = dv.rows;
  
    export default {
      data() {
        return {
          data,
          height: 400,
          adjust: [{
            type: 'dodge',
            marginRatio: 1 / 32,
          }],
        };
      }
    };
  </script>
  <style scoped lang="less">
  .bar{
    position: relative;
    .chart{
    }
  }
</style>